<template>
  <!-- jhipster-pro-please-regenerate-this-file 如果您修改了此文件，并且不希望重新生成代码时被覆盖，请删除本行！！！-->
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form layout="inline" @submit.prevent="save" class="ant-advanced-update-form">
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.id')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.id.$model"
              id="common-table-field-id"
              name="id"
              read-only
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.title')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.title.$model"
              id="common-table-field-title"
              name="title"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.entityFieldName')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.entityFieldName.$model"
              id="common-table-field-entityFieldName"
              name="entityFieldName"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.type')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select placeholder="请选择" id="common-table-field-type" name="type" required v-model="$v.commonTableField.type.$model">
              <a-select-option value="INTEGER">{{ $t('jhipsterApp.CommonFieldType.INTEGER') }}</a-select-option>
              <a-select-option value="LONG">{{ $t('jhipsterApp.CommonFieldType.LONG') }}</a-select-option>
              <a-select-option value="BOOLEAN">{{ $t('jhipsterApp.CommonFieldType.BOOLEAN') }}</a-select-option>
              <a-select-option value="STRING">{{ $t('jhipsterApp.CommonFieldType.STRING') }}</a-select-option>
              <a-select-option value="FLOAT">{{ $t('jhipsterApp.CommonFieldType.FLOAT') }}</a-select-option>
              <a-select-option value="DOUBLE">{{ $t('jhipsterApp.CommonFieldType.DOUBLE') }}</a-select-option>
              <a-select-option value="ZONED_DATE_TIME">{{ $t('jhipsterApp.CommonFieldType.ZONED_DATE_TIME') }}</a-select-option>
              <a-select-option value="LOCATE_DATE">{{ $t('jhipsterApp.CommonFieldType.LOCATE_DATE') }}</a-select-option>
              <a-select-option value="BIG_DECIMAL">{{ $t('jhipsterApp.CommonFieldType.BIG_DECIMAL') }}</a-select-option>
              <a-select-option value="TEXTBLOB">{{ $t('jhipsterApp.CommonFieldType.TEXTBLOB') }}</a-select-option>
              <a-select-option value="IMAGEBLOB">{{ $t('jhipsterApp.CommonFieldType.IMAGEBLOB') }}</a-select-option>
              <a-select-option value="ARRAY">{{ $t('jhipsterApp.CommonFieldType.ARRAY') }}</a-select-option>
              <a-select-option value="ENUM">{{ $t('jhipsterApp.CommonFieldType.ENUM') }}</a-select-option>
              <a-select-option value="UPLOAD_IMAGE">{{ $t('jhipsterApp.CommonFieldType.UPLOAD_IMAGE') }}</a-select-option>
              <a-select-option value="UPLOAD_FILE">{{ $t('jhipsterApp.CommonFieldType.UPLOAD_FILE') }}</a-select-option>
              <a-select-option value="ENTITY">{{ $t('jhipsterApp.CommonFieldType.ENTITY') }}</a-select-option>
              <a-select-option value="RADIO">{{ $t('jhipsterApp.CommonFieldType.RADIO') }}</a-select-option>
              <a-select-option value="MULTI_SELECT">{{ $t('jhipsterApp.CommonFieldType.MULTI_SELECT') }}</a-select-option>
              <a-select-option value="DATA_DICTIONARY">{{ $t('jhipsterApp.CommonFieldType.DATA_DICTIONARY') }}</a-select-option>
              <a-select-option value="UUID">{{ $t('jhipsterApp.CommonFieldType.UUID') }}</a-select-option>
              <a-select-option value="INSTANT">{{ $t('jhipsterApp.CommonFieldType.INSTANT') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.tableColumnName')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.tableColumnName.$model"
              id="common-table-field-tableColumnName"
              name="tableColumnName"
              required
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.columnWidth')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.columnWidth.$model"
              id="common-table-field-columnWidth"
              name="columnWidth"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.order')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.order.$model"
              id="common-table-field-order"
              name="order"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.editInList')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.editInList.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-editInList"
              name="editInList"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.hideInList')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.hideInList.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-hideInList"
              name="hideInList"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.hideInForm')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.hideInForm.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-hideInForm"
              name="hideInForm"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.searchForm')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.searchForm.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-searchForm"
              name="searchForm"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.enableFilter')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.enableFilter.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-enableFilter"
              name="enableFilter"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.validateRules')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.validateRules.$model"
              id="common-table-field-validateRules"
              name="validateRules"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.showInFilterTree')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.showInFilterTree.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-showInFilterTree"
              name="showInFilterTree"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.fixed')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select placeholder="请选择" id="common-table-field-fixed" name="fixed" v-model="$v.commonTableField.fixed.$model">
              <a-select-option value="LEFT">{{ $t('jhipsterApp.FixedType.LEFT') }}</a-select-option>
              <a-select-option value="RIGHT">{{ $t('jhipsterApp.FixedType.RIGHT') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.sortable')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTableField.sortable.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-sortable"
              name="sortable"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.treeIndicator')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.treeIndicator.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-treeIndicator"
              name="treeIndicator"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.clientReadOnly')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.clientReadOnly.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-clientReadOnly"
              name="clientReadOnly"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.fieldValues')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.fieldValues.$model"
              id="common-table-field-fieldValues"
              name="fieldValues"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.notNull')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTableField.notNull.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-notNull"
              name="notNull"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.system')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-switch
              v-model="$v.commonTableField.system.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-system"
              name="system"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.nullHideInForm')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-switch
              v-model="$v.commonTableField.nullHideInForm.$model"
              checkedChildren="是"
              unCheckedChildren="否"
              id="common-table-field-nullHideInForm"
              name="nullHideInForm"
            ></a-switch>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.endUsed')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-select placeholder="请选择" id="common-table-field-endUsed" name="endUsed" v-model="$v.commonTableField.endUsed.$model">
              <a-select-option value="FILE_URL">{{ $t('jhipsterApp.EndUsedType.FILE_URL') }}</a-select-option>
              <a-select-option value="IMAGE_URL">{{ $t('jhipsterApp.EndUsedType.IMAGE_URL') }}</a-select-option>
              <a-select-option value="VIDEO_URL">{{ $t('jhipsterApp.EndUsedType.VIDEO_URL') }}</a-select-option>
              <a-select-option value="AUDIO_URL">{{ $t('jhipsterApp.EndUsedType.AUDIO_URL') }}</a-select-option>
              <a-select-option value="EDITOR">{{ $t('jhipsterApp.EndUsedType.EDITOR') }}</a-select-option>
              <a-select-option value="CODE_EDITOR">{{ $t('jhipsterApp.EndUsedType.CODE_EDITOR') }}</a-select-option>
              <a-select-option value="SELECT">{{ $t('jhipsterApp.EndUsedType.SELECT') }}</a-select-option>
              <a-select-option value="MODAL_SELECT">{{ $t('jhipsterApp.EndUsedType.MODAL_SELECT') }}</a-select-option>
              <a-select-option value="CHECKBOX">{{ $t('jhipsterApp.EndUsedType.CHECKBOX') }}</a-select-option>
              <a-select-option value="RADIO">{{ $t('jhipsterApp.EndUsedType.RADIO') }}</a-select-option>
              <a-select-option value="RATE">{{ $t('jhipsterApp.EndUsedType.RATE') }}</a-select-option>
              <a-select-option value="SLIDER">{{ $t('jhipsterApp.EndUsedType.SLIDER') }}</a-select-option>
              <a-select-option value="SWITCH">{{ $t('jhipsterApp.EndUsedType.SWITCH') }}</a-select-option>
              <a-select-option value="TEXT_AREA">{{ $t('jhipsterApp.EndUsedType.TEXT_AREA') }}</a-select-option>
              <a-select-option value="AVATAR">{{ $t('jhipsterApp.EndUsedType.AVATAR') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('jhipsterApp.modelConfigCommonTableField.options')" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
            <a-input
              placeholder="input placeholder"
              v-model="$v.commonTableField.options.$model"
              id="common-table-field-options"
              name="options"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.metaModel')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-select id="common-table-field-metaModel" name="metaModel" v-model="commonTableField.metaModelId">
              <a-select-option v-bind:value="commonTableOption.id" v-for="commonTableOption in commonTables" :key="commonTableOption.id">{{
                commonTableOption.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            :label="$t('jhipsterApp.modelConfigCommonTableField.commonTable')"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
          >
            <a-select id="common-table-field-commonTable" name="commonTable" v-model="commonTableField.commonTableId">
              <a-select-option v-bind:value="commonTableOption.id" v-for="commonTableOption in commonTables" :key="commonTableOption.id">{{
                commonTableOption.name
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center">
        <a-col span="3">
          <a-button @click="previousState()">{{ $t('entity.action.cancel') }}</a-button>
        </a-col>
        <a-col span="3">
          <a-button html-type="submit" type="primary" :disabled="$v.commonTableField.$invalid || isSaving">{{
            $t('entity.action.save')
          }}</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
<script lang="ts" src="./common-table-field-update-template.component.ts"></script>
<style>
.ant-advanced-update-form .ant-form-item {
  display: flex;
}
.ant-advanced-update-form .ant-form-item-control-wrapper {
  flex: 1;
}
</style>
